<template>
    <div class="departmentItem">
          <div class="departmentInfo"><i>{{type==1?'资产管理':'办公耗材'}}</i><el-button type="primary" @click="clickDept">选择部门</el-button><em>请选择使用本仓库{{type==1?'资产':'耗材'}}的部门</em></div>
          <el-tag :key="index"  v-for="(item,index) in tags"
                    closable
                    :disable-transitions="false"
                    @close="handleClose(item)">
                    {{item.dept_name}}
          </el-tag>
    </div>
</template>

<script>
    import { removeDept,bindDept } from './api'
    import {departmentsPicker} from "@/libs/utils" /**封装选部门方法 */
    export default {
        props:{
           type:[String, Number],
           id:[String, Number],
           tags:{
               type:Array,
               default:()=>{return []}
           }
        },
        created(){
            let arr = []
            this.tags.forEach((item,index)=>{
                arr.push(item.dept_id.toString())
            })
            this.idsArr = [...arr]
        },
        watch:{
           tags(newData , old ){
                let arr = []
                newData.forEach((item,index)=>{
                    arr.push(item.dept_id.toString())
                })
                this.idsArr = [...arr]
           }
        },
        data(){
            return {
                idsArr:[]
            }
        },
        methods:{
            clickDept(){
                let that = this
                console.log(this.idsArr,'idsArr')
                departmentsPicker(this,{pickedDepartments:this.idsArr},function (res) {
                    bindDept({departments:JSON.stringify(res.departments),id:that.id,wh_dept_type:that.type}).then(res=>{
                        that.$emit('bindDept',that.id)
                    })
                })
            },
            handleClose(item){
                if(item.dept_id == 1){
                    this.$message({
                    message: '默认部门不能删除，选择部门后自动覆盖。',
                    type: 'warning'
                    });
                    return false
                }
                removeDept({
                    id:this.id,
                    dept_id:item.dept_id,
                    wh_dept_type:this.type
                })
                .then((res)=>{
                    this.$emit('del',this.id)
                }) 
            }
        }
    }
</script>

<style lang="scss">
.departmentItem{
    width: calc(49.2% - 64px);
    background: #F7F7F7;
    padding: 25px 32px 80px;
    overflow: hidden;
    &:last-child{
        margin-right: 0px;
    }
    .departmentInfo{
        flex: 1;
        display: flex;
        align-items: center;
        margin-bottom: 22px;
        > i{
            color: #000;
            font-size: 16px;
            font-style:normal;
            font-weight: 600;
            margin-right: 20px
        }
        .el-button--small, .el-button--small.is-round{
            padding:8px 8px 4px!important;
            margin-right: 15px !important;
        }
        > em{
            color: #7B7B7B;
            font-size: 14px;
            font-style:normal;
        }
    }
    .el-tag{
        font-size: 12px !important;
        color:#8A8A8A !important;
        background-color:#F0F2F5 !important;
        border-color:#F0F2F5 !important;
    }
    .el-tag--small{
        height: 26px !important;
        line-height: 24px !important;
        margin-right: 7px !important;
        margin-bottom: 8px !important;
    }
    .el-tag .el-icon-close{
        color:#fff !important;
        background-color:#C0C4CC !important;
        line-height: 17px !important;
        right: -2px !important;
    }
}
</style>